<template>
    <div>
        <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="handleChange">
            <img v-if="props.avatar" :src="avatarComputed" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </div>
</template>
<script setup>
import { computed } from 'vue';
import { Plus } from '@element-plus/icons-vue'
const props = defineProps(["avatar"])
const emits = defineEmits(["change"])
const avatarComputed = computed(() => 
  // console.log(userForm.avatar);
  props.avatar.includes("blob") ?props.avatar : 'http://localhost:3000/' +  props.avatar
)
const handleChange = (file) => {
    emits('change',file)
}
</script>
<style scoped lang='scss'>
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}


:deep(.avatar-uploader .el-upload):hover {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
}
</style>